<template>
  <view class="login-wrap">
    <image class="bg" src="../../static/images/login/bg.png"></image>
		<view class="info-container">
			<view class="scan-container" @click="handleScanCode">
				<image class="Qr-code" src="../../static/images/login/Qr-code.png" mode="aspectFill"></image>
				<view class="desc">扫描二维码进入班级</view>
			</view>
			<view class="box">
				<button class="btn" @click="handleLogin">登录</button>
				<view class="forget" @click="handleForget">
					<image class="" src="../../static/images/login/forget.png"></image>
					<view class="forget-desc">忘记密码</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import Base64 from '../../utils/base64'
export default {
  name: 'loginLaunch',
	onLoad() {
		clearInterval()
	},
	methods:{
		handleScanCode(){
			uni.scanCode({
				scanType: 'qrCode',
				success(e) {
					const data = e.result
					const params = Base64.decode(data.split('|')[1])
					const action = data.split('|')[0].substr(1)
					const newParams = JSON.parse(params)
					const info = Object.assign({}, {...newParams},{action:action})
					uni.navigateTo({
						url: `/pages/register/index?base=${JSON.stringify(info)}`
					})
				},
			})
		},
		handleLogin () {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		},
		handleForget() {
			uni.navigateTo({
				url: '/pages/forget/index',
				animationType: 'pop-in'
			})
		}
	}
}

</script>
<style lang='scss' scoped>
.login-wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  .bg{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
		z-index: 1;
  }
	.info-container{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 2;
		padding-top: 241upx;
		box-sizing: border-box;
		.scan-container{
			width: 306upx;
			margin: 0 auto;
			margin-bottom: 96upx;
		}
		.Qr-code{
			width:306upx;
			height:306upx;
			display: block;
			margin: 0 auto;
		}
		.desc{
			font-size: 31upx;
			line-height: 76upx;
			color: #CE7518;
			text-align: center;
		}
		.box{
			width: 100%;
			position: relative;
		}
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width:135upx;
			height:135upx;
			background:rgba(235,104,119,1);
			box-shadow:0px 3upx 4upx 2upx rgba(0, 0, 0, 0.22);
			border-radius:50%;
			color: #fff;
			font-weight: 800;
			border: none;
			outline: none;
			margin-bottom: 42upx;
		}
		.forget{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 132upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				margin-right: 10upx;
				width:29upx;
				height:29upx;
			}
			.forget-desc{
				font-size: 25upx;
				color: #fff;
				line-height: 30upx;
				color: #FE0000;
			}
		}
	}
}
</style>